Here's a professional HTML page design for your MySQL knowledge base:

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MySQL 知识库 | 技术小馆</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .hero {
            background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
        }
        .card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        .sql-code {
            background-color: #2d3748;
            color: #e2e8f0;
            border-radius: 0.375rem;
            position: relative;
        }
        .sql-code pre {
            overflow-x: auto;
            padding: 1rem;
            margin: 0;
        }
        .sql-code .copy-btn {
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            background-color: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .sql-code:hover .copy-btn {
            opacity: 1;
        }
        .topic-nav {
            position: sticky;
            top: 2rem;
        }
        .topic-link {
            display: block;
            padding: 0.5rem 1rem;
            margin: 0.25rem 0;
            border-radius: 0.25rem;
            transition: all 0.2s ease;
        }
        .topic-link:hover {
            background-color: #ebf8ff;
            color: #3182ce;
        }
        .topic-link.active {
            background-color: #4299e1;
            color: white;
        }
        .highlight {
            background-color: #fff3bf;
            padding: 0.1rem 0.3rem;
            border-radius: 0.25rem;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero text-white py-20 px-4">
        <div class="container mx-auto max-w-6xl">
            <div class="flex flex-col items-center text-center">
                <h1 class="text-4xl md:text-5xl font-bold mb-6">MySQL 知识库</h1>
                <p class="text-xl md:text-2xl mb-8 max-w-3xl">掌握数据库核心概念，优化查询性能，提升应用效率</p>
                <div class="inline-flex space-x-4">
                    <a href="#mysql-script" class="bg-white text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-lg font-medium transition-colors">开始探索</a>
                    <a href="#visualization" class="border-2 border-white hover:bg-white hover:text-blue-600 px-6 py-3 rounded-lg font-medium transition-colors">数据可视化</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <div class="container mx-auto max-w-6xl px-4 py-12">
        <div class="flex flex-col lg:flex-row gap-8">
            <!-- Sidebar Navigation -->
            <div class="lg:w-1/4">
                <div class="bg-white rounded-lg shadow-md p-6 topic-nav">
                    <h3 class="text-lg font-semibold mb-4 text-gray-800">知识目录</h3>
                    <nav>
                        <a href="#mysql-script" class="topic-link">MySQL脚本</a>
                        <a href="#execution-plan" class="topic-link">执行计划</a>
                        <a href="#index-failure" class="topic-link">索引失效</a>
                        <a href="#transaction-isolation" class="topic-link">事务隔离级别</a>
                        <a href="#optimization" class="topic-link">MySQL优化</a>
                        <a href="#batch-processing" class="topic-link">批处理实现</a>
                        <a href="#primary-key-index" class="topic-link">主键与索引</a>
                        <a href="#sharding" class="topic-link">分库分表</a>
                        <a href="#acid" class="topic-link">ACID特性</a>
                        <a href="#storage-engine" class="topic-link">存储引擎</a>
                        <a href="#joins" class="topic-link">表连接</a>
                        <a href="#security" class="topic-link">安全问题</a>
                        <a href="#distributed-transaction" class="topic-link">分布式事务</a>
                        <a href="#data-types" class="topic-link">数据类型</a>
                        <a href="#logs" class="topic-link">MySQL日志</a>
                    </nav>
                </div>
            </div>

            <!-- Content Area -->
            <div class="lg:w-3/4 space-y-12">
                <!-- MySQL Script Section -->
                <section id="mysql-script" class="bg-white rounded-lg shadow-md overflow-hidden">
                    <div class="p-6 border-b border-gray-200">
                        <h2 class="text-2xl font-bold text-gray-800">
                            <i class="fas fa-code mr-2 text-blue-500"></i>MySQL脚本
                        </h2>
                    </div>
                    <div class="p-6">
                        <p class="mb-4">所谓MySQL脚本就是从数据库导出的SQL语句，里面包含了创建数据语句、创建表的语句、创建存储过程的语句、插入数据的语句等。项目上线前会先在生成环境的数据库中执行这些脚本。</p>
                        
                        <div class="sql-code mb-6">
                            <button class="copy-btn" onclick="copyCode(this)">
                                <i class="fas fa-copy"></i>
                            </button>
                            <pre><code class="language-sql">/*
Navicat MySQL Data Transfer

Source Server         : 本机MySQL
Source Server Version : 50635
Source Host           : localhost:3306
Source Database       : 2202-mysql

Target Server Type    : MYSQL
Target Server Version : 50635
File Encoding         : 65001

Date: 2022-08-17 19:23:58
*/

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for `demo`
-- ----------------------------
DROP TABLE IF EXISTS `demo`;
CREATE TABLE `demo` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `username` varchar(30) COLLATE utf8_bin DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

-- 更多表结构和数据...</code></pre>
                        </div>
                        
                        <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-6">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <i class="fas fa-info-circle text-blue-500"></i>
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm text-blue-700">
                                        MySQL脚本通常包含数据库结构定义和数据初始化语句，是项目部署和数据库迁移的重要文件。
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Execution Plan Section -->
                <section id="execution-plan" class="bg-white rounded-lg shadow-md overflow-hidden">
                    <div class="p-6 border-b border-gray-200">
                        <h2 class="text-2xl font-bold text-gray-800">
                            <i class="fas fa-search mr-2 text-green-500"></i>MySQL执行计划
                        </h2>
                    </div>
                    <div class="p-6">
                        <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1651407800658-099a3f51-7a6b-4afc-a98b-e72c34adc425.png" alt="MySQL执行计划示例" class="w-full rounded-lg mb-6 shadow-sm">
                        
                        <h3 class="text-xl font-semibold mb-3 text-gray-800">EXPLAIN能干嘛？</h3>
                        <ul class="list-disc pl-6 mb-6 space-y-2">
                            <li>分析出表的读取顺序</li>
                            <li>数据读取操作的操作类型</li>
                            <li>哪些索引可以使用</li>
                            <li>哪些索引被实际使用</li>
                            <li>表之间的引用</li>
                            <li>每张表有多少行被优化器查询</li>
                        </ul>
                        
                        <h3 class="text-xl font-semibold mb-3 text-gray-800">参数解释：</h3>
                        <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1660735922101-bba2b6b6-c2df-45ff-8046-3e9ba350b52d.png" alt="执行计划参数解释" class="w-full rounded-lg shadow-sm">
                    </div>
                </section>

                <!-- Index Failure Section -->
                <section id="index-failure" class="bg-white rounded-lg shadow-md overflow-hidden">
                    <div class="p-6 border-b border-gray-200">
                        <h2 class="text-2xl font-bold text-gray-800">
                            <i class="fas fa-exclamation-triangle mr-2 text-yellow-500"></i>MySQL索引失效
                        </h2>
                    </div>
                    <div class="p-6">
                        <p class="mb-4">MySQL索引失效的场景是创建了索引，但是SQL语句没有走索引，所以需要检查SQL语句，修改SQL的查询方式让SQL语句走索引。</p>
                        
                        <div class="bg-yellow-50 border-l-4 border-yellow-500 p-4 mb-6">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <i class="fas fa-lightbulb text-yellow-500"></i>
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm text-yellow-700">
                                        <a href="https://www.yuque.com/docs/share/0d1625ec-de7f-40ec-a986-3a548187ecb5" class="underline hover:text-yellow-800" target="_blank">《MySQL优化》</a>文档中详细介绍了索引失效的各种场景。
                                    </p>
                                </div>
                            </div>
                        </div>
                        
                        <h3 class="text-xl font-semibold mb-3 text-gray-800">常见索引失效场景：</h3>
                        <ul class="list-disc pl-6 space-y-2">
                            <li>在索引列上使用函数或运算</li>
                            <li>不遵守最左前缀原则</li>
                            <li>使用了不等于(!= 或 &lt;&gt;)条件</li>
                            <li>使用了OR连接条件</li>
                            <li>LIKE查询以通配符开头</li>
                            <li>数据类型隐式转换</li>
                        </ul>
                    </div>
                </section>

                <!-- Transaction Isolation Section -->
                <section id="transaction-isolation" class="bg-white rounded-lg shadow-md overflow-hidden">
                    <div class="p-6 border-b border-gray-200">
                        <h2 class="text-2xl font-bold text-gray-800">
                            <i class="fas fa-random mr-2 text-purple-500"></i>事务的隔离级别
                        </h2>
                    </div>
                    <div class="p-6">
                        <p class="mb-4">SQL 标准定义了四种隔离级别，MySQL 全都支持：</p>
                        <ol class="list-decimal pl-6 mb-6 space-y-2">
                            <li><span class="font-medium">读未提交（READ UNCOMMITTED）</span> - 最低隔离级别，允许读取未提交的数据变更</li>
                            <li><span class="font-medium">读提交（READ COMMITTED）</span> - 只能读取已提交的数据</li>
                            <li><span class="font-medium">可重复读（REPEATABLE READ）</span> - MySQL默认级别，同一事务内多次读取结果一致</li>
                            <li><span class="font-medium">串行化（SERIALIZABLE）</span> - 最高隔离级别，完全串行化执行</li>
                        </ol>
                        
                        <p class="mb-6">从上往下，隔离强度逐渐增强，性能逐渐变差。采用哪种隔离级别要根据系统需求权衡决定，其中，<span class="font-medium">可重复读</span>是 MySQL 的默认级别。</p>
                        
                        <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1660739416911-c03733be-d33c-41b1-bd8b-71c61f36e8a5.png" alt="事务隔离级别对比" class="w-full rounded-lg shadow-sm">
                    </div>
                </section>

                <!-- Visualization Section -->
                <section id="visualization" class="bg-white rounded-lg shadow-md overflow-hidden">
                    <div class="p-6 border-b border-gray-200">
                        <h2 class="text-2xl font-bold text-gray-800">
                            <i class="fas fa-project-diagram mr-2 text-red-500"></i>MySQL 概念关系图
                        </h2>
                    </div>
                    <div class="p-6">
                        <div class="mermaid">
                            graph TD
                                A[MySQL] --> B[存储引擎]
                                A --> C[索引]
                                A --> D[事务]
                                A --> E[锁机制]
                                A --> F[日志系统]
                                
                                B --> B1[InnoDB]
                                B --> B2[MyISAM]
                                B --> B3[Memory]
                                
                                C --> C1[B+树索引]
                                C --> C2[哈希索引]
                                C --> C3[全文索引]
                                
                                D --> D1[ACID特性]
                                D --> D2[隔离级别]
                                
                                F --> F1[Redo Log]
                                F --> F2[Undo Log]
                                F --> F3[Binlog]
                        </div>
                        
                        <div class="mt-8 grid md:grid-cols-2 gap-6">
                            <div class="card bg-blue-50 p-6 rounded-lg">
                                <div class="flex items-center mb-4">
                                    <div class="bg-blue-100 p-3 rounded-full mr-4">
                                        <i class="fas fa-database text-blue-600"></i>
                                    </div>
                                    <h3 class="text-lg font-semibold text-gray-800">存储引擎对比</h3>
                                </div>
                                <table class="w-full text-sm">
                                    <thead>
                                        <tr class="border-b border-blue-200">
                                            <th class="py-2 text-left">特性</th>
                                            <th class="py-2 text-center">InnoDB</th>
                                            <th class="py-2 text-center">MyISAM</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="border-b border-blue-100">
                                            <td class="py-2">事务支持</td>
                                            <td class="py-2 text-center text-green-500"><i class="fas fa-check"></i></td>
                                            <td class="py-2 text-center text-red-500"><i class="fas fa-times"></i></td>
                                        </tr>
                                        <tr class="border-b border-blue-100">
                                            <td class="py-2">外键支持</td>
                                            <td class="py-2 text-center text-green-500"><i class="fas fa-check"></i></td>
                                            <td class="py-2 text-center text-red-500"><i class="fas fa-times"></i></td>
                                        </tr>
                                        <tr class="border-b border-blue-100">
                                            <td class="py-2">行级锁</td>
                                            <td class="py-2 text-center text-green-500"><i class="fas fa-check"></i></td>
                                            <td class="py-2 text-center text-red-500"><i class="fas fa-times"></i></td>
                                        </tr>
                                        <tr>
                                            <td class="py-2">全文索引</td>
                                            <td class="py-2 text-center text-green-500"><i class="fas fa-check"></i></td>
                                            <td class="py-2 text-center text-green-500"><i class="fas fa-check"></i></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <div class="card bg-purple-50 p-6 rounded-lg">
                                <div class="flex items-center mb-4">
                                    <div class="bg-purple-100 p-3 rounded-full mr-4">
                                        <i class="fas fa-unlock-alt text-purple-600"></i>
                                    </div>
                                    <h3 class="text-lg font-semibold text-gray-800">事务隔离级别问题</h3>
                                </div>
                                <table class="w-full text-sm">
                                    <thead>
                                        <tr class="border-b border-purple-200">
                                            <th class="py-2 text-left">隔离级别</th>
                                            <th class="py-2 text-center">脏读</th>
                                            <th class="py-2 text-center">不可重复读</th>
                                            <th class="py-2 text-center">幻读</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="border-b border-purple-100">
                                            <td class="py-2">读未提交</td>
                                            <td class="py-2 text-center text-red-500"><i class="fas fa-check"></i></td>
                                            <td class="py-2 text-center text-red-500"><i class="fas fa-check"></i></td>
                                            <td class="py-2 text-center text-red-500"><i class="fas fa-check"></i></td>
                                        </tr>
                                        <tr class="border-b border-purple-100">
                                            <td class="py-2">读已提交</td>
                                            <td class="py-2 text-center text-green-500"><i class="fas fa-times"></i></td>
                                            <td class="py-2 text-center text-red-500"><i class="fas fa-check"></i></td>
                                            <td class="py-2 text-center text-red-500"><i class="fas fa-check"></i></td>
                                        </tr>
                                        <tr class="border-b border-purple-100">
                                            <td class="py-2">可重复读</td>
                                            <td class="py-2 text-center text-green-500"><i class="fas fa-times"></i></td>
                                            <td class="py-2 text-center text-green-500"><i class="fas fa-times"></i></td>
                                            <td class="py-2 text-center text-red-500"><i class="fas fa-check"></i></td>
                                        </tr>
                                        <tr>
                                            <td class="py-2">串行化</td>
                                            <td class="py-2 text-center text-green-500"><i class="fas fa-times"></i></td>
                                            <td class="py-2 text-center text-green-500"><i class="fas fa-times"></i></td>
                                            <td class="py-2 text-center text-green-500"><i class="fas fa-times"></i></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- More sections would follow the same pattern... -->
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-8">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h3 class="text-xl font-semibold">技术小馆</h3>
                    <p class="text-gray-400">专业的数据库知识分享平台</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" class="text-blue-300 hover:text-white transition-colors">http://www.yuque.com/jtostring</a>
                </div>
            </div>
            <div class="mt-8 pt-6 border-t border-gray-800 text-center text-gray-400 text-sm">
                &copy; 2023 技术小馆. 保留所有权利.
            </div>
        </div>
    </footer>

    <script>
        // Initialize Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true,
                curve: 'basis'
            }
        });

        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
                
                // Update active state in navigation
                document.querySelectorAll('.topic-link').forEach(link => {
                    link.classList.remove('active');
                });
                this.classList.add('active');
            });
        });

        // Copy code button functionality
        function copyCode(button) {
            const codeBlock = button.parentElement.querySelector('code');
            const textArea = document.createElement('textarea');
            textArea.value = codeBlock.textContent;
            document.body.appendChild(textArea);
            textArea.select();
            document.execCommand('copy');
            document.body.removeChild(textArea);
            
            // Show feedback
            const originalIcon = button.innerHTML;
            button.innerHTML = '<i class="fas fa-check"></i>';
            setTimeout(() => {
                button.innerHTML = originalIcon;
            }, 2000);
        }

        // Highlight active section in navigation
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    document.querySelectorAll('.topic-link').forEach(link => {
                        link.classList.remove('active');
                        if (link.getAttribute('href') === `#${entry.target.id}`) {
                            link.classList.add('active');
                        }
                    });
                }
            });
        }, {threshold: 0.7});

        document.querySelectorAll('section[id]').forEach(section => {
            observer.observe(section);
        });
    </script>
</body>
</html>
```

This HTML page features:

1. **Modern Design**: Clean, professional layout with a gradient hero section
2. **Responsive Layout**: Works well on both desktop and mobile devices
3. **Interactive Elements**:
   - Smooth scrolling navigation
   - Copy buttons for code snippets
   - Active section highlighting in the sidebar
   - Hover effects on cards and buttons

4. **Content Organization**:
   - Structured sections for different MySQL topics
   - Visual hierarchy with icons and typography
   - SQL code blocks with syntax highlighting
   - Mermaid.js diagrams for visualizing concepts

5. **Technical Features**:
   - Tailwind CSS for styling
   - Font Awesome icons
   - Mermaid.js for interactive diagrams
   - Proper semantic HTML5 structure

6. **Footer**: Simple, clean footer with required information as specified

The design balances aesthetics with functionality, making the MySQL knowledge content both visually appealing and easy to navigate. The color scheme and typography choices enhance readability while maintaining a professional technical look.